<template>
  <ul class="list"> 
      <li class="item" 
      v-for="(item) of letters" 
      :key="item"
      :ref="item"
       @click="fnClick"
       @touchstart.prevent="handleTouchStart"
       @touchmove="handleTouchMove"
       @touchend="handleTouchEnd"
       >{{item}}</li>
  </ul>
</template>
<script>
export default {
    name:'CityAlphabet',
    props:["alphabet"],
    data () {
        return {
            touchStatus:false,
            startY:0,
            timer:null,
        }
    },
    updated(){
        this.startY=this.$refs['A'][0].offsetTop
    },
    computed:{
        letters(){
            // alphabet是对象，先把它转化成数组
            const letters=[]
            for(let i in this.alphabet){
                letters.push(i)
            }
            return letters
        }
    },
    methods:{
        fnClick(e){
            this.$emit("change",e.target.innerHTML)
        },
        // 开始触屏，标记符=true；滑动时，标记符不变,只有true的时候，才处理滚动事件；结束时，标记符=false
        handleTouchStart () {
            this.touchStatus=true
        },
        handleTouchMove (e) {
            // （手指当前的位置到顶部的距离-a到定位的距离）/字母的高度
            if(this.touchStatus){
                // 函数节流：如果16ms之间又触屏了，会清除上一次的触屏，重新执行这次的触屏函数
                if(this.timer){
                    clearTimeout(this.timer)
                }
                // 手指到Header下边界的距离=手指距离顶部的距离-Header的高度
                // e.touches得到一个touchList数组对象
                this.timer=setTimeout(()=>{
                    const touchY=e.touches[0].clientY-79
                    // 计算出手指的位置对应的字母下标 20是字母的高度
                    const index=Math.floor((touchY-this.startY)/20)
                    if(index >=0 && index < this.letters.length){
                        this.$emit("change",this.letters[index])
                    }
                },16)
            }
        },
        handleTouchEnd () {
            this.touchStatus=false
        },
    }
}
</script>
<style scoped lang="stylus">
@import "~styles/varibles.styl";
.list
    position absolute
    display flex
    flex-direction column
    justify-content center
    top 1.78rem
    bottom 0
    right 0
    width .4rem
    .item 
        text-align center
        color $bgColor
        line-height .4rem
</style>
